<template>
  <div>
    <div id="act1_header">
       <i class="el-icon-arrow-left" @click="back"></i>
       <span class="act1_header_font">兑换金币</span>
       
    </div>

    <div class="inputs">

       <input type="text" placeholder="请输入兑换码" v-model="inputed"><i class="el-icon-circle-close clear" @click="clear"></i>

    </div>


    <div id="act1_footer">
       <p class="title1">在素士天猫，京东，米家有品旗舰店会不定期<br>
                        举办活动,购买活动商品可以金币兑换码。</p>

      <el-button type="info" round class="button1" v-if="flag">确定兑换</el-button>


       <el-button type="success" round class="button1" v-if="!flag"  @click="exchange">确定兑换</el-button>
      



    </div>

  </div>
</template>

<script>
export default {
data:function(){
  return{
    inputed:'',
    flag:true,
    codelist:{}
  }

},
  methods:{
    back:function(){
      this.$router.go(-1)
    },
    clear:function(){
      this.inputed=''

    },
    changeflag:function () {  
     if(1){
       this.flag=false
     }
      
    },
    exchange:function(){ //查询兑换码 是否存在，并充钱
          this.$http.get('/api/users/mzh/'+this.inputed).then(({
                    data,
                    config
                }) =>{
                   
                    this.codelist=data.data;
                  this.$message.success(this.inputed+'兑换码正确,所加金币为'+this.codelist.coin)

               this.$http.put('/api/users/'+this.$store.state.id,{coin:this.$store.state.coin+this.codelist.coin}).then(({//充豆子
                   })=>{
                  
                  if(data.code==200){
                      
                     this.$message.success ('豆子充值成功')
                  }else{
                   
                   this.$message.error('豆子充值失败')
                    }
              })


                  
                });
                

    }
  },

  mounted(){
    this.changeflag()

  }

}
</script>

<style scoped>
#act1_footer{
 position: relative;
 top:800px;

}
.button1{
  margin: 20px 40%;
}

.title1{
  font-size: 25px;
  color: rgb(202, 198, 198);
  text-align: center;
}




.clear{
   margin-top:50px;
   font-size: 40px;
}
.inputs{
display: flex;
justify-content: center;
}

  input {
   border: none;
    outline: none;
    margin-top:50px;

}

#act1_header{
    height: 80px;
    
    
    display: flex;
    align-items: center;
}
.act1_header_font{
    font-size: 35px;margin-left: 260px;
    font-weight: bold;
    margin-left: 3.46667rem;
 
}

</style>